<template>
  <el-dialog
    v-model="isModalVisible"
    width="80%"
    title="查看详情"
    :append-to-body="true"
    @close="closeModal"
  >
    <div v-loading="loading" class="info">
      <div v-if="statues == 4">
        <el-button type="primary" style="width: 150px" @click="clickBut('next')">下一单</el-button>
        <el-button type="primary" style="width: 150px" @click="clickBut('previous')">
          上一单
        </el-button>
      </div>
      <div>
        <div class="right-color">基本信息</div>
        <el-form label-width="auto" inline>
          <el-form-item label="业主姓名：" prop="name">{{ infos?.ownName }}</el-form-item>
          <el-form-item label="联系电话：" prop="zone">{{ infos?.mobile }}</el-form-item>
          <el-form-item label="房屋户型：" prop="name">{{ infos?.houseType }}</el-form-item>
          <el-form-item label="房屋面积：" prop="zone">{{ infos?.size }}㎡</el-form-item>
          <el-form-item label="房屋地址：" prop="zone">
            {{ infos?.houseAddress }}{{ infos?.neighborhood }}
          </el-form-item>
        </el-form>
        <div v-if="statues == 4" class="right-color">
          {{ infos?.opportunityVo?.categoryTypeName }} - 需求信息
        </div>
        <el-form v-if="statues == 4" label-width="auto" inline>
          <el-form-item label="品类商品：" prop="name">
            {{ infos?.opportunityVo?.productTypeName }}
          </el-form-item>
          <el-form-item label="空间：" prop="name">
            {{ infos?.opportunityVo?.spaceName }}
          </el-form-item>
          <el-form-item label="采买时间：" prop="time">
            {{ infos?.opportunityVo?.purchaseTypeName }}
          </el-form-item>
          <el-form-item label="预算(元)：" prop="time">
            {{ infos?.opportunityVo?.budget }}
          </el-form-item>
          <el-form-item label="发布时间：" prop="time">
            {{ infos?.opportunityVo?.createTime }}
          </el-form-item>
          <el-form-item label="业主备注：" prop="name">
            {{ infos?.opportunityVo?.remark }}
          </el-form-item>
        </el-form>
        <div v-if="statues == 4" class="right-color">成交动态</div>
        <div v-if="statues == 4" class="bom">
          <BasePageTable
            style="min-height: 400rpx"
            :tableColumnsData="leftColumns"
            :pageSize="historyParams.pageSize"
            :tableData="historyData"
            :total="historyParams.total"
            :loading="loading"
            @handleQuery="historyChangePage"
          ></BasePageTable>
        </div>
      </div>
      <el-tabs v-if="statues == 3" type="border-card" class="demo-tabs">
        <!--        <el-tab-pane v-if="statues == 4" label="商机信息">
          <div class="bom">
            <div>
              <div class="right-color">{{ infos?.opportunityVo?.categoryTypeName }} - 需求信息</div>
              <el-form label-width="auto" inline>
                <el-form-item label="品类商品：" prop="name">
                  {{ infos?.opportunityVo?.productTypeName }}
                </el-form-item>
                <el-form-item label="空间：" prop="name">
                  {{ infos?.opportunityVo?.spaceName }}
                </el-form-item>
                <el-form-item label="采买时间：" prop="time">
                  {{ infos?.opportunityVo?.purchaseTypeName }}
                </el-form-item>
                <el-form-item label="预算：" prop="time">
                  {{ infos?.opportunityVo?.budget }}
                </el-form-item>
                <el-form-item label="发布时间：" prop="time">
                  {{ infos?.opportunityVo?.createTime }}
                </el-form-item>
                <el-form-item label="业主备注：" prop="name">
                  {{ infos?.opportunityVo?.remark }}
                </el-form-item>
              </el-form>
            </div>
            <div class="right-color">{{ tabInfo?.categoryTypeName }} 修改历史</div>
            <BasePageTable
              :tableColumnsData="updataColumns"
              :pageSize="merchantParams.pageSize"
              :tableData="merchantPageData"
              :total="merchantParams.total"
              :loading="loading"
              style="min-height: 400rpx"
              @handleQuery="merchantChangePage"
            ></BasePageTable>
          </div>
        </el-tab-pane>
-->

        <!-- 成交商机不需要展示 http://172.29.9.192:8181/zentao/bug-view-274.html -->
        <!--        <el-tab-pane v-if="statues == 3" label="成交商机">-->
        <!--          <div class="bom">-->
        <!--            <el-row :gutter="20">-->
        <!--              <el-col :span="7">-->
        <!--                <BasePageTable-->
        <!--                  style="min-height: 400rpx"-->
        <!--                  :tableColumnsData="merchantColumns"-->
        <!--                  :tableData="infos?.transactionOpportunityVOList"-->
        <!--                  @cell-click="changTable"-->
        <!--                ></BasePageTable>-->
        <!--              </el-col>-->
        <!--              <el-col :span="17">-->
        <!--                <div>-->
        <!--                  <div class="right-color">{{ tabInfo?.categoryTypeName }} - 需求信息</div>-->
        <!--                  <el-form label-width="auto" inline>-->
        <!--                    <el-form-item label="品类商品：" prop="name">-->
        <!--                      {{ tabInfo?.productTypeName }}-->
        <!--                    </el-form-item>-->
        <!--                    <el-form-item label="空间：" prop="name">{{ tabInfo?.spaceName }}</el-form-item>-->
        <!--                    <el-form-item label="采买时间：" prop="time">-->
        <!--                      {{ tabInfo?.purchaseTypeName }}-->
        <!--                    </el-form-item>-->
        <!--                    <el-form-item label="预算：" prop="time">{{ tabInfo?.budget }}</el-form-item>-->
        <!--                    <el-form-item label="发布时间：" prop="time">-->
        <!--                      {{ tabInfo?.createTime }}-->
        <!--                    </el-form-item>-->
        <!--                    <el-form-item label="业主备注：" prop="name">-->
        <!--                      {{ tabInfo?.remark }}-->
        <!--                    </el-form-item>-->
        <!--                  </el-form>-->
        <!--                </div>-->
        <!--&lt;!&ndash;                <div>&ndash;&gt;-->
        <!--&lt;!&ndash;                  <div class="right-color">修改历史</div>&ndash;&gt;-->
        <!--&lt;!&ndash;                  <BasePageTable&ndash;&gt;-->
        <!--&lt;!&ndash;                    class="h-full"&ndash;&gt;-->
        <!--&lt;!&ndash;                    :tableColumnsData="updataColumns"&ndash;&gt;-->
        <!--&lt;!&ndash;                    :pageSize="merchantParams.pageSize"&ndash;&gt;-->
        <!--&lt;!&ndash;                    :tableData="merchantPageData"&ndash;&gt;-->
        <!--&lt;!&ndash;                    :total="merchantParams.total"&ndash;&gt;-->
        <!--&lt;!&ndash;                    :loading="loading"&ndash;&gt;-->
        <!--&lt;!&ndash;                    style="min-height: 200rpx"&ndash;&gt;-->
        <!--&lt;!&ndash;                    @handleQuery="merchantChangePage"&ndash;&gt;-->
        <!--&lt;!&ndash;                  ></BasePageTable>&ndash;&gt;-->
        <!--&lt;!&ndash;                </div>&ndash;&gt;-->
        <!--              </el-col>-->
        <!--            </el-row>-->
        <!--          </div>-->
        <!--        </el-tab-pane>-->
        <el-tab-pane v-if="statues == 3" label="成交历史">
          <div class="bom">
            <BasePageTable
              style="min-height: 400rpx"
              :tableColumnsData="leftColumns"
              :pageSize="historyParams.pageSize"
              :tableData="historyWithConsumerData"
              :total="historyParams.total"
              :loading="loading"
              @handleQuery="historyChangePage"
            ></BasePageTable>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import opportunityPaymentAPI from "@/api/opportunityPayment/index";

const isModalVisible = ref(false);
const infos = ref();
const loading = ref(false);
const tabInfo = ref();
const emit = defineEmits(["nextBut"]);
const statues = ref(4);
const leftColumns = [
  {
    type: "index",
    label: "序号",
    width: 60,
    align: "center",
  },
  {
    label: "成交品类",
    prop: "categoryTypeName",
    align: "center",
  },
  {
    label: "成交金额(元)",
    prop: "amount",
    align: "center",
  },
  {
    label: "成交商户",
    prop: "merUserName",
    align: "center",
  },
  // {
  //   label: "所在商圈",
  //   prop: "mallName",
  //   align: "center",
  // },
  {
    label: "发送时间",
    prop: "transactionTime",
    align: "center",
  },
];

const merchantColumns = [
  {
    type: "index",
    label: "序号",
    width: 60,
    align: "center",
  },
  {
    label: "品类",
    prop: "categoryTypeName",
    align: "center",
  },
  {
    label: "最近修改时间",
    prop: "modifyTime",
    align: "center",
  },
];
const updataColumns = ref([
  {
    type: "index",
    label: "序号",
    width: 60,
    align: "center",
  },
  {
    label: "修改内容",
    prop: "content",
    align: "center",
  },
  {
    label: "修改时间",
    prop: "operateTime",
    align: "center",
  },
]);
const merchantParams = ref({
  pageSize: 10,
  total: 1,
  pageNum: 1,
  userId: undefined,
  requirementId: undefined,
});
const historyParams = ref({
  pageSize: 10,
  total: 1,
  pageNum: 1,
  conUserId: undefined,
  merUserId: undefined,
});
const merchantPageData = ref();
const historyData = ref();
const historyWithConsumerData = ref();
const listInfo = ref();

function openModal(row: any) {
  isModalVisible.value = true;
  statues.value = row.status;
  getInfos(row, row.status);
}

async function getInfos(row: any, _status: number) {
  listInfo.value = row;
  const data = {
    status: row.status,
    id: row.id,
    transactionRecordId: row.transactionRecordId,
    consumerId: row.consumerId,
    merchantId: row.merchantId,
  };
  try {
    loading.value = true;
    const res = await opportunityPaymentAPI.getDetail(data);
    infos.value = res.data;
    if (_status === 4) {
      tabInfo.value = res.data.opportunityVo;
      getHistory();
    } else if (_status === 3) {
      tabInfo.value = infos.value.transactionOpportunityVOList[0];
      getDynamic();
      getHistoryWithConsumer();
    }
    loading.value = false;
  } catch (err) {
    loading.value = false;
  }
}

function merchantChangePage(val: any) {
  merchantParams.value.pageNum = val.pageNum;
  merchantParams.value.pageSize = val.pageSize;
  getDynamic();
}

async function getDynamic() {
  merchantParams.value.userId = tabInfo.value.userId;
  merchantParams.value.requirementId = tabInfo.value.id;
  try {
    loading.value = true;
    const res: any = await opportunityPaymentAPI.getConDynamic(merchantParams.value);
    merchantPageData.value = res.data;
    merchantParams.value.total = res.total;
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
}

async function getHistory() {
  historyParams.value.conUserId = listInfo.value.consumerId;
  historyParams.value.merUserId = listInfo.value.merchantId;
  try {
    loading.value = true;
    const res: any = await opportunityPaymentAPI.getHistory(historyParams.value);
    console.log(res);
    historyData.value = res.data;
    for (let i = 0; i < historyData.value.length; i++) {
      if (!historyData.value[i].amount) {
        historyData.value[i].amount = "****";
      }
    }
    historyParams.value.total = res.total;
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
}

async function getHistoryWithConsumer() {
  historyParams.value.conUserId = listInfo.value.consumerId;
  historyParams.value.merUserId = listInfo.value.merchantId;
  try {
    loading.value = true;
    const res: any = await opportunityPaymentAPI.getHistoryWithConsumer(historyParams.value);
    console.log(res);
    historyWithConsumerData.value = res.data;
    for (let i = 0; i < historyWithConsumerData.value.length; i++) {
      if (!historyWithConsumerData.value[i].amount) {
        historyWithConsumerData.value[i].amount = "/";
      }
    }
    historyParams.value.total = res.total;
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
}

function historyChangePage(val: any) {
  historyParams.value.pageNum = val.pageNum;
  historyParams.value.pageSize = val.pageSize;
  // getHistory();
  //获取商户和业主的成交记录 http://172.29.9.192:8181/zentao/bug-view-274.html
  getHistoryWithConsumer();
}

function clickBut(val: any) {
  emit("nextBut", val);
}

function changTable(val: any) {
  tabInfo.value = val;
  getDynamic();
}

function closeModal() {}
defineExpose({
  openModal,
});
</script>

<style lang="scss" scoped>
.info {
  .right-color {
    border-left: 4px solid #4095fe;
    padding-left: 10px;
    font-size: 16px;
    font-weight: 600;
    margin-top: 10px;
  }
}
</style>
